import React, {CSSProperties, PropsWithChildren} from 'react'
import {Cell, Checkbox} from "@nutui/nutui-react-taro";
import {Text, View} from "@tarojs/components";
import styles from "./GoodsListItem.module.sass"
import Taro from "@tarojs/taro";


export interface GoodsListItemData {
    price?: number
    name: string
    barcode: string
    id: number
    subGoods?: GoodsListItemSubData
}

export interface GoodsListItemSubData {
    id: number
    name: string
    number: string
    amount: number
}

export interface GoodsListItemProps extends PropsWithChildren {
    data: GoodsListItemData
    style?: CSSProperties
    checked?: boolean
    onCheckChange?: (checked: boolean) => void
    disabled?:boolean
}

const GoodsListItem: React.FC<GoodsListItemProps> = (props,) => {
    const data = props.data
    return <>
        <Cell onClick={() => {
            Taro.navigateTo({
                url: `/pages/goodsDetail?id=${data.id}`
            })
        }} title={<View className={styles.titleContainer}>
            <Text overflow={"ellipsis"} className={styles.title}>{data.subGoods ? `${data.subGoods.name}（${data.name}）` : data.name}</Text>
            {!!props.onCheckChange ?
                <View onClick={event => {
                    event.stopPropagation();
                }}><Checkbox checked={props.checked}
                             disabled={props.disabled}
                             onChange={(v) => !!props.onCheckChange && props.onCheckChange(v)}/></View> :
                <Text>{data.price}</Text>}
        </View>}
              description={data.subGoods ? data.barcode + " | " + data.subGoods.number : data.barcode}
              style={props.style}/>
    </>
}

export default GoodsListItem


